import React from 'react'
import { Button, Input, Row, Col, Form, message } from 'antd'
const Search = Input.Search;
import BasicInfo from 'components/basic-info'
import img from 'images/component-lib/timg-2.jpg'
import config from 'config'
const FormItem = Form.Item;

export default {
  key: 'basic-info',
  name: 'BasicInfo 基础信息',
  author: '王梦莎',
  description: '由SearchArea组合而来，用于显示一些可编辑的详情信息，一种符合新中控的设计组件封装。',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [{
        param: 'infoList', description: '主要显示的内容配置，与::SearchArea::的::searchForm::一致。', type: 'array', defaultValue: '-'
      }, {
        param: 'infoData', description: '显示的内容数据，其中每个::key::字段与::infoList::中的::id::需一致。', type: 'object', defaultValue: '-'
      }, {
        param: 'updateHandle', description: '点击::SearchArea::内部保存按钮时的事件。', type: 'function(result)', defaultValue: '-'
      }, {
        param: 'updateState', description: '组件的编辑状态，当为::true::时为编辑模式，否则为基本信息展示模式。', type: 'boolean', defaultValue: 'false'
      }, {
        param: 'loading', description: '编辑模式下保存按钮的::loading::状态', type: 'boolean', defaultValue: 'false'
      }, {
        param: 'eventHandle', description: '内部::SearchArea::的::eventHandle::事件。', type: 'function(event, value)', defaultValue: '-'
      }, {
        param: 'isHideEditBtn', description: '是否隐藏编辑按钮。', type: 'boolean', defaultValue: 'false'
      }, {
        param: 'handleEdit', description: '点击编辑时如果有其他操作不想使用::searchArea::时则设置，不设置则渲染::searchArea::。', type: 'function', defaultValue: '-'
      }],
      description: '每一个::BasicInfo::内部都有一个::SearchArea::，内部表单项的展示模式与::SearchArea::完全一致。'
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '一些基本的信息展示。',
      state: {
        infoList: [{
          type: 'input', id: 'text', label: '名字'
        },{
          type: 'date', id: 'date', label: '生日'
        },{
          type: 'switch', id: 'open', label: '权限'
        }],
        infoData: {
          text: '张三',
          date: '1995-01-01',
          open: true
        }
      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const { infoList, infoData } = context.state;
        return (
          <div>
            <BasicInfo infoList={infoList}
                       infoData={infoData}
                       isHideEditBtn/>
          </div>
        )
      }
    },
    {
      title: '可编辑的信息',
      description: '所有信息均可编辑，内部为封装好的::SearchArea::，以及保存loading状态示例。',
      state: {
        infoList: [{
          type: 'input', id: 'text', label: '名字'
        },{
          type: 'date', id: 'date', label: '生日'
        },{
          type: 'switch', id: 'open', label: '权限'
        }],
        infoData: {
          text: '张三',
          date: '1995-01-01',
          open: true,
          badge: true
        },
        updateState: false,
        loading: false
      },
      getMethod: context => {
        return {
          updateHandle: infoData => {
            context.setState({ loading: true });
            setTimeout(() => {
              context.setState({ infoData, updateState: true, loading: false });
              message.success('保存成功');
            }, 1000)
          }
        }
      },
      getContent: context => {
        const { infoList, infoData, updateState, loading } = context.state;
        return (
          <div>
            <BasicInfo infoList={infoList}
                       infoData={infoData}
                       updateState={updateState}
                       updateHandle={context.updateHandle}
                       loading={loading}
            />
          </div>
        )
      }
    },
    {
      title: '选择框与Chooser',
      description: '::SearchArea::内支持的复杂组件也支持。',
      state: {
        infoList: [{
          type: 'list',
          id: 'applicant',
          label: '申请人',
          listType: 'user',
          labelKey: 'fullName',
          valueKey: 'userOID',
          listExtraParams: {roleType: 'TENANT'},
          entity: true,
        }, {
          type: 'select', id: 'setOfBooksId', label: '帐套', placeholder: '请选择', options: [],
          getUrl: `${config.baseUrl}/api/setOfBooks/by/tenant`, method: 'get',
          labelKey: 'setOfBooksCode', valueKey: 'id', getParams: { roleType: 'TENANT' }
        }],
        infoData: {
          applicant: [{
            fullName: '申请人1', userOID: '1'
          },{
            fullName: '申请人2', userOID: '2'
          }],
          setOfBooksId: null
        },
        updateState: false
      },
      getMethod: context => {
        return {
          updateHandle: infoData => {
            context.setState({ infoData, updateState: true })
          }
        }
      },
      getContent: context => {
        const { infoList, infoData, updateState } = context.state;
        return (
          <div>
            <BasicInfo infoList={infoList}
                       infoData={infoData}
                       updateState={updateState}
                       updateHandle={context.updateHandle}

            />
          </div>
        )
      }
    }
  ]
}
